function patch(oldNode, vNode) {
  let el = createElement(vNode),
      parentElement = oldNode.parentNode;
  
  // 因为oldNode节点后面还有别的节点，所以不能直接替换
  parentElement.insertBefore(el, oldNode.nextSibling);
  parentElement.removeChild(oldNode);
}

function createElement(vnode) { // 创建元素 => 转真实dom
  const { tag, props, children, text } = vnode;

  if (typeof tag === 'string') { // 如果标签名存在就创建
    vnode.el = document.createElement(tag);

    updateProps(vnode); // 处理属性

    children.map(child => {
      vnode.el.appendChild(createElement(child)); // 递归子元素
    })
  } else { // 如果不存在就是文本
    vnode.el = document.createTextNode(text);
  }

  return vnode.el;
}

function updateProps(vnode) { // 处理元素属性
  const el = vnode.el,
        newProps = vnode.props || {};

  for (let key in newProps) {
    if (key === 'style') {
      for (let sKey in newProps.style) {
        el.style[sKey] = newProps.style[sKey];
      }
    } else if (key === 'class') {
      el.className = newProps[key];
    } else {
      el.setAttribute(key, newProps[key]);
    }
  }
}

export {
  patch
}